<template>
	<div class="container">
		<headerVue :id='id' />

		<div class="tab">
			<div class="tab-item" :class="{active: sort === ''}" @click="clickTabHandle('')">
				<text></text>
				<text>最新</text>
			</div>
			<div class="tab-item" :class="{active: sort === 'hot'}" @click="clickTabHandle('hot')">
				<text></text>
				<text>热门</text>
			</div>
		</div>

		<div class="list">
			<div class="list-item" v-for="(item,index) in listData" :key="item['_id']">
				<JxList :item='item' />
			</div>
		</div>

		<JxLoadMore :list="listData" :loadStatus='loadStatus' />
		<AuxiliaryMenu />
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import file from '@/utils/file/index.js'
	import tools from '@/utils/tools/index.js'
	import headerVue from './components/header.vue';
	import JxList from '@/components/list/index.vue'
	import articles from '@/api/articles/index.js'
	import JxLoadMore from '@/components/LoadMore/index.vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import AuxiliaryMenu from '@/components/AuxiliaryMenu/index.vue'

	const id = ref('');
	const page = ref(1);
	const sort = ref('');
	const listData = ref([]);
	const loadStatus = ref('loadmore')

	async function initData() {
		page.value = 1;
		tools.loading('page');
		listData.value = await getList();
		uni.hideLoading()
	}

	async function getList() {
		loadStatus.value = 'loading'
		const response = await articles.getList({ menu_id: id.value, page: page.value, limit: 10, sort: sort.value });
		if (response['code'] == 200) {
			const list = response['data'].map(item => {
				item['cover'] = file.getFileUrls(item['cover']);
				item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
				item['shortDate'] = tools.shortDate(item['create_date'])
				return item;
			})
			loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
			return list;
		}
		return [];
	}

	async function clickTabHandle(val) {
		page.value = 1;
		sort.value = val;
		tools.loading();
		listData.value = await getList();
		uni.hideLoading()
	}

	onReachBottom(async () => {
		if (loadStatus.value === 'loadmore') {
			page.value++;
			const list = await getList();
			listData.value = listData.value.concat(list);
		}
	})

	onLoad((option) => {
		id.value = option.id;
		initData();
	})
</script>

<style lang="scss" scoped>
	.container {
		background: $uv-bg-color;

		.tab {
			padding: 0 $side-width;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			margin-top: 38rpx;

			.tab-item {
				color: $uv-tips-color;
				font-size: 38rpx;
				margin-right: 40rpx;
				display: flex;
				align-items: center;

				text:first-child {
					background-image: linear-gradient(180deg, #ff504d, #ff7471);
					border-radius: 4rpx;
					height: 30rpx;
					width: 7rpx;
					margin-right: 8rpx;
					opacity: 0;
				}

				&.active {
					color: $uv-main-color;

					text:first-child {
						opacity: 1;
					}
				}
			}
		}

		.list {
			padding: 0 $side-width;

			.list-item {
				padding: $side-width;
				background: #fff;
				margin-bottom: 26rpx;
				border-radius: 5px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>